<template>
  <!-- dialog-组件 -->
  <div class="dialog" :style="dialogStyle" v-if="showBtn" >
    <div class="confirm-box" :style="dialogBoxStyle">
      <p class="wk-title" @mousedown="drag" :style="isDrag?'cursor:move':''">
        {{ title }}
      </p>
      <div class="content-box">
        <p v-if="desc" class="wk-cont">{{ desc }}</p>
        <p
          v-if="comtent"
          class="wk-cont"
          :class="className"
          v-html="comtent"
          ref="imgBox"
        ></p>
      </div>
      <div class="wk-btns">
        <mu-button v-if="isRotate" small @click="rotate(false)">
          左转
        </mu-button>
        <mu-button v-if="isRotate" small @click="rotate(true)">
          右转
        </mu-button>
        <mu-button color="primary" small @click="sureBtnFn">
          {{ sureText }}
        </mu-button>
        <mu-button v-if="type == 'confirm'" small @click="closeConfirm">
          {{ closeText }}
        </mu-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "sx-dialog",
  props: {},
  data() {
    return {
      type: "",
      showBtn: true,
      dialogStyle: {},
      dialogBoxStyle: {},
      title: "",
      desc: "",
      className: "",
      comtent: "",
      sureText: "确定",
      closeText: "取消",
      isRotate: false,
      isDrag: false
    };
  },
  mounted() {},
  methods: {
    drag(e) {
      if (!this.isDrag) return;
      const oDiv = e.path[1];
      const disX = e.clientX - oDiv.offsetLeft;
      const disY = e.clientY - oDiv.offsetTop;
      document.onmousemove = function(e) {
        e.preventDefault();
        let l = e.clientX - disX;
        let t = e.clientY - disY;
        const leftLimit = parseInt(oDiv.style.width) / 2;
        if (l - leftLimit <= 0) {
          l = leftLimit;
        }
        if (t - oDiv.offsetHeight / 2 < 0) {
          t = oDiv.offsetHeight / 2;
        }
        let dialogRight = window.innerWidth - l - oDiv.offsetWidth;
        let dialogBottom = window.innerHeight - t - oDiv.offsetHeight;
        let maxTop = window.innerHeight - oDiv.offsetHeight;
        let maxLeft = window.innerWidth - oDiv.offsetWidth;
        if (dialogRight + oDiv.offsetWidth / 2 < 0) {
          l = maxLeft + oDiv.offsetWidth / 2; //因为样式有偏移50%
        }
        if (dialogBottom + oDiv.offsetHeight / 2 < 0) {
          t = maxTop + oDiv.offsetHeight / 2;
        }
        oDiv.style.left = l + "px";
        oDiv.style.top = t + "px";
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  }
};
</script>
<style lang="less" scoped>
.dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.5);
  .confirm-box {
    width: 410px;
    padding: 24px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0px 4px 10px 0px rgba(46, 46, 46, 0.28);
    border: 1px solid rgba(237, 241, 247, 1);
    animation: fadeIn 0.5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .content-box {
      overflow: auto;
      max-height: 500px;
    }
    p {
      &.wk-title {
        font-size: 18px;
        font-weight: 600;
        color: #313131;
        display: flex;
        align-items: center;
        i {
          font-size: 24px;
          color: #ffbb44;
          margin-right: 6px;
        }
      }
      &.wk-cont {
        padding: 12px 0 20px;
        font-size: 14px;
        line-height: 20px;
        color: #797979;
      }
    }
    .border-top {
      border-top: 1px solid #ccc;
    }
    .wk-btns {
      padding-top: 20px;
      text-align: right;
      button {
        margin-left: 10px;
      }
    }
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
